<template>
  <div class="dashboard-container">
    <div class="app-container">
            <Card title="权限页面">
        <div >
  <!-- 搜索 -->
      <Form inline style="margin-top: 50px; margin-left: 40px">
      <FormItem>
        <Input v-model="params.title" placeholder="请输入用户名" style="width: 300px" />
      </FormItem>
      <FormItem>
        <Button type="primary"  shape="circle" icon="ios-search" @click="onSearch">搜索</Button>
      </FormItem>
      <FormItem>
        <Button type="primary" shape="circle" @click="onReset">重置</Button>
      </FormItem>
    </Form>
        </div>
         <div style="text-align: right">
       <Button style="margin-right:40px" type="primary" shape="circle" icon="md-brush"  @click="add">新增权限</Button></div>
 <Alert class="bcolor padd" style="margin-top:20px"><Icon type="ios-bug-outline"  style="margin-right:10px;" />总共有{{total}}条数据</Alert>
        <div class="box_table">
          <Table border :columns="columns" :data="tableData" :loading="loading" style="margin-right:40px;margin-left:40px" >
            <template slot-scope="{ row }" slot="date">
              {{ new Date(row.create_date).getFullYear() + '-' + (new Date(row.create_date).getMonth() + 1) + '-' + new Date(row.create_date).getDate()}}
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" size="small" style="margin-right: 5px" @click="edit(index)">编辑</Button>
              <Button type="error" size="small" @click="del(index)">删除</Button>
            </template>
          </Table>
          <div class='page'>
            <Page :total="total" show-sizer show-elevator @on-change='onChange' />
          </div>
        </div>
      </Card>
      <Modal
        v-model="addModal"
        title="新增权限组"
        @on-ok="okAdd"
        @on-cancel="cancel">
        <Form :model="addForm" label-position="right" :label-width="100">
          <FormItem label="用户名">
            <Input  placeholder="请输入用户名" v-model="addForm.title"/>
          </FormItem>
          <FormItem label="权限分配">
            <Tree :data="menus" children-key="childs" show-checkbox @on-check-change="onCheckChange"></Tree>
          </FormItem>
        </Form>
      </Modal>
      <Modal
        v-model="editModal"
        title="编辑权限组"
        @on-ok="okEdit"
        @on-cancel="cancel1">
        <Form :model="addForm" label-position="right" :label-width="100">
          <FormItem label="用户名">
            <Input  placeholder="请输入用户名" v-model="addForm.title"/>
          </FormItem>
          <FormItem label="权限分配">
            <Tree v-if="done" :data="menus" children-key="childs" show-checkbox @on-check-change="onCheckChange"></Tree>
          </FormItem>
        </Form>
      </Modal>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.operation{padding: 20px 0;text-align: right;}
.page{padding: 20px;text-align: center;}
.margin{
  margin-bottom: 20px ;
margin-left: 40px;
  margin-right: 40px;

}
</style>

<script>
import { list as pist } from '@/api/base/menus'
import { detail, list, remove, add, update } from '@/api/base/permissions'
export default {
  name: 'base-permissions',
  data () {
    return {

      loading: true,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: 'ID',
          key: 'id',
          align: 'center'
        },
        {
          title: '用户名',
          key: 'title',
          align: 'center'
        },
        {
          title: '日期',
          // key: 'create_date',
          slot: 'date'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      params: {
        page: '1',
        pagesize: '10',
        title: ''
      },
      menus: [{
        title: '系统菜单和页面权限点',
        expand: false,
        childs: []
      }],
      tableData: [],
      total: 0,
      addModal: false,
      editModal: false,
      addForm: {
        title: '',
        permissions: []
      },
      done: false
    }
  },
  created () {
    this.getTableData(this.params).then(res => {
      this.tableData = res.data.list
      this.loading = false
    })
  },
  methods: {

    // 获取权限列表
    getTableData (params) {
      return new Promise(resolve => {
        list(params).then(res => {
          this.total = res.data.counts
          resolve(res)
        })
      })
    },
    // 获取节点数据
    getMenus () {
      return new Promise(resolve => {
        pist().then(res => {
          this.menus[0].childs = res.data
          resolve(this.menus)
        }).catch(res => {
          console.log(res)
        })
      })
    },
    // 根据title搜索内容
    onSearch () {
      this.loading = true

      list(this.params).then(res => {
        this.tableData = res.data.list
        this.loading = false
      })
    },
    // 重置按钮
    onReset () {
      this.loading = true
      this.keyword = ''
      this.params = {
        page: '1',
        pagesize: '10'
      }
      this.getTableData(this.params).then(res => {
        this.tableData = res.data.list
        this.loading = false
      })
    },
    // 添加权限
    add () {
      this.addModal = true
      this.getMenus()
      this.addForm = {
        title: '',
        permissions: ''
      }
    },
    // 点击编辑
    async edit (index) {
      this.editModal = true
      await this.getMenus()
      const params = {
        id: this.tableData[index].id
      }
      await detail(params).then(res => {
        this.addForm.title = res.data.title
        this.addForm.id = res.data.id
        this.getTreeData(this.menus, res.data.permissions)
      })
    },
    // 点击删除
    del (index) {
      this.loading = true
      const params = {
        id: this.tableData[index].id
      }
      remove(params).then(res => {
        this.$Message.success('删除成功')
        this.getTableData(this.params).then(res => {
          this.tableData = res.data.list
          this.loading = false
        })
      }).catch(res => {
        this.$Message.error('删除失败')
      })
    },
    // 点击确定按钮执行添加操作
    okAdd () {
      add(this.addForm).then(res => {
        this.$Message.success('添加成功')
        this.getTableData(this.params).then(res => {
          this.tableData = res.data.list
          this.loading = false
        })
      }).catch(res => {
        this.$Message.error('添加失败')
      })
    },
    // 点击编辑按钮执行添加操作
    okEdit () {
      update(this.addForm).then(res => {
        this.$Message.success('编辑成功')
        this.getTableData(this.params).then(res => {
          this.tableData = res.data.list
          this.loading = false
        })
      }).catch(res => {
        this.$Message.error('编辑失败')
      })
    },
    cancel () {

    },
    cancel1 () {
      this.getMenus()
    },

    onCheckChange (e) {
    // 取到点击复选框时的返回的数组
      this.addForm.permissions = e.map(a => a.id)
    },
    onChange (page) {
      this.loading = true
      const params = {
        page: page,
        pagesize: '10'
      }
      this.getTableData(params).then(res => {
        this.tableData = res.data.list
        this.loading = false
      })
    },
    // 将数据转化为树形
    getTreeData (data, ids) {
      for (let j = 0; j < ids.length; j++) {
        for (let i = 0; i < data.length; i++) {
          if (ids[j] === data[i].id && !data[i].checked) {
            // data[i].checked = true
            this.$set(data[i], 'checked', true)
            console.log('data[i]11', data[i])
          }
          if (!data[i].childs) {
            // childs若为空数组，则将childs设为undefined
            data[i].childs = undefined
          } else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].childs, ids)
          }
        }
      }
      return new Promise(resolve => {
        this.done = true
        resolve(data)
      })
    }
  }
}
</script>
